<template>
  <div class="editSingle" @click="changeShow">
    <template v-if="isShow">
      <span>{{ value }}</span>
    </template>
    <template v-else>
      <input type="text" v-model="editedValue" class="ed-ipt" @blur="editPlantSort" style="width: 80px;">
    </template>
  </div>
</template>

<script type="text/ecmascript-6">
  import { apiTree } from '../../apiTree'
  import util from '../../util'

  export default {
    name: 'plantSortInput',
    props: {
      val: 0,
      plant_name: {
        type: String
      }
    },
    data() {
      return {
        isShow: true,
        editedValue: ''
      }
    },
    created() {
      this.showValue()
    },
    computed: {
      value() {
        return this.editedValue
      }
    },
    methods: {
      showValue() {
        this.editedValue = parseInt(this.val)
      },
      changeShow() {
        this.isShow = false
      },
      editPlantSort(e) {
        if (!util.isInt(this.editedValue) || this.editedValue < 0) {
          this.$notify.error({
            title: '输入错误',
            message: '请输入大于0的数字',
            offset: 200
          })
          return
        }
        let param = {'val': this.editedValue, 'name': this.plant_name}
        apiTree('plant/index', 'plant/editPlantSort', param).then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.isShow = true
          }
        })
      }
    },
    watch: {
      val() {
        this.showValue()
      }
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .editSingle
    cursor pointer
    .ed-ipt
      width 100px
</style>
